<template>
  <CommonPage show-footer>

    <n-card min-w-840 title='约束选择' vertical>
      <n-space justify='space-around' size='large'>

        <n-space size='large'>
          <n-tag size='large' :bordered='false' type='success'>
            省份选择
          </n-tag>

          <n-tree-select
            min-w-500
            filterable
            :options='options'
            default-value='请输入省份'
            clearable
          />

          <n-button type='success'>确定</n-button>

        </n-space>
        <n-space size='large'>
          <n-tag size='large' :bordered='false' type='success'>
            地市选择
          </n-tag>

          <n-tree-select
            min-w-500
            filterable
            :options='options'
            default-value='请输入地市'
            clearable
          />

          <n-button type='success'>确定</n-button>

        </n-space>
        <n-space size='large'>
          <n-tag size='large' :bordered='false' type='success'>
            代理商选择
          </n-tag>

          <n-tree-select
            min-w-487
            filterable
            :options='options'
            default-value='请输入代理商'
            clearable
          />

          <n-button type='success'>确定</n-button>

        </n-space>
      </n-space>

    </n-card>


    <n-card min-w-840  min-h-200 title='字段展示区'>
      <n-space vertical>
        <n-space size='large'>

          <n-tag v-for='(item,key) in checkedRowKeys' :key='key' type='success'>
            {{ item }}
          </n-tag>

        </n-space>
      </n-space>
    </n-card>
    <n-card min-w-840  min-h-200 title='字段选择区'>
      <n-data-table
        :scroll-y='800'
        :columns='columns'
        :data='data'
        :pagination='pagination'
        :row-key='rowKey'
        @update:checked-row-keys='handleCheck'
      />
    </n-card>


  </CommonPage>
</template>

<script>
import { defineComponent, ref } from 'vue'

const createColumns = () => [
  {
    type: 'selection'
  },
  {
    title: '字段翻译',
    key: 'zh_name'
  },
  {
    title: '源名称',
    key: 'origin_name'
  }

]
// 数据表格
const data = Array.from({ length: 46 }).map((_, index) => ({
  zh_name: `${index}`,
  origin_name: 32
}))

const options = ref()
options.value = [
  {
    label: 'Rubber Soul',
    key: 'Rubber Soul'
  },
  {
    label: 'Rubber Soul',
    key: 'Rub2ber Soul'
  },
  {
    label: 'Rubber Soul',
    key: 'Rub23ber Soul'
  },
  {
    label: 'Rubber Soul',
    key: 'Rubb324er Soul'
  },
  {
    label: 'Rubber Soul',
    key: 'Rubb34er Soul'
  }
]
export default defineComponent({
  setup() {
    const checkedRowKeysRef = ref([])
    return {
      data,
      columns: createColumns(),
      checkedRowKeys: checkedRowKeysRef,
      pagination: {
        pageSize: 15
      },
      rowKey: (row) => row.zh_name,
      handleCheck(rowKeys) {
        console.log(rowKeys)
        checkedRowKeysRef.value = rowKeys
      },
      constraint: ref([
        {
          key: '',
          value: ''
        }
      ]),
      options
    }
  }
})


</script>